<template>
  <div class="selectValue" style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2; color: black">
    <van-field :disabled="disabled"  v-model="result" v-bind="$attrs" :required="bitian" :label="labels" readonly @click="!ISrequired ? (show = !show) : ISrequired">
      <template #button v-if="buttonTest">
        <van-button @click.stop="handleButton" size="small" type="info">{{ buttonTest }}</van-button>
      </template>
    </van-field>
    <van-popup v-model="show" position="bottom" get-container="body">
      <van-picker v-if="!isTime" :columns="columns" show-toolbar :value-key="values" :title="$attrs.label" @cancel="show = !show" @confirm="onConfirm" />
      <van-datetime-picker :min-date="minDate" :max-date="maxDate" v-else v-model="currentDate" type="date" title="选择年月日" @cancel="show = !show" @confirm="onConfirmRQ" />
    </van-popup>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'selectValue',
  },
  props: {
    columns: {
      type: Array
    },
    buttonTest: {
      type: String,
      default: ''
    },
    keys: {
      type: String
    },
    selectValue: {
      type: String
    },
    labels: {
      type: String
    },
    name: {
      type: String //父组件传进来一个name
    },
    values: {
      type: String //界面展示的name值
    },
    DICID: {
      type: String //对应的需要存储的id
    },
    isTime: {
      type: Boolean
    },
    ISrequired: {
      typeof: Boolean
    },
    bitian: {
      typeof: Boolean
    },
    disabled:{
      typeof: Boolean
    }
  },
  data() {
    return {
      show: false,
      result: this.selectValue,
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  methods: {
    onConfirm(value) {
      this.result = value[this.values]
      console.log(this.labels, 'hhh')
      this.show = !this.show
      this.$emit('getMessage', this.result, value[this.DICID], this.labels, this.keys) //把value值传给父组件
    },
    handleButton(){
        this.$emit('getButton', this.result, this.labels, this.keys)
    },
    onConfirmRQ(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      // let hour = val.getHours()
      // let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      // if (hour >= 0 && hour <= 9) {
      //     hour = `0${hour}`
      // }
      // if (minute >= 0 && minute <= 9) {
      //     minute = `0${minute}`
      // }
      // if (second >= 0 && second <= 9) {
      //     second = `0${second}`
      // }
      //${hour}:${minute}:${second}
      this.result = `${year}-${month}-${day}`
      this.show = !this.show
      this.$emit('getMessage', this.result, this.labels, this.keys)
    }
  },
  watch: {
    selectValue: function (newVal) {
      this.result = newVal
    },
    result(newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>
<style>
.selectValue .van-field__control {
  text-align: right;
}

.selectValue .van-field__label {
  /*font-weight: bold !important;*/
  /*font-size: 13px !important;*/
  /*color: #000 !important;*/
}

.selectValue .van-cell::after {
  display: none;
}
</style>
